<template>
  <view class="case-demo">
    <!-- 1. 数据绑定 -->
    <view class="section">
      <text class="title">数据绑定：</text>
      <text class="content">{{ message }}</text>
    </view>

    <!-- 2. 点击事件处理 -->
    <view class="section">
      <text class="title">点击事件：</text>
      <button type="primary" @click="handleClick">点击计数</button>
      <text class="content">已点击 {{ count }} 次</text>
    </view>
	
	<view class="case-demo">
	    <!--  数据双向绑定 -->
	    <view class="section">
	      <text class="title">数据双向绑定：</text>
		  <view>
			  <input v-model="message" style="background-color: white;"/>
		  </view>
	      <text class="content">{{message}}</text>
	    </view>
		</view>

    <!-- 3. 条件判断 -->
    <view class="section">
      <text class="title">条件判断：</text>
      <button type="default" @click="toggleShow">切换显示状态</button>
      <view v-if="isShow" class="condition-box">
        条件满足时显示的内容（v-if 控制）
      </view>
      <view v-show="isShowVShow" class="condition-box">
        条件满足时显示的内容（v-show 控制）
      </view>
    </view>

    <!-- 4. 列表渲染 -->
    <view class="section">
      <text class="title">列表渲染：</text>
      <view 
        class="list-item" 
        v-for="(item, index) in listData" 
        :key="index"
      >
        索引：{{ index }}，名称：{{ item.name }}，ID：{{ item.id }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello SmartUI!', // 数据绑定的源数据
      count: 0, // 点击计数
      isShow: true, // v-if 控制的显示状态
      isShowVShow: true, // v-show 控制的显示状态
      listData: [ // 列表渲染的源数组
        { id: 1, name: '项目A' },
        { id: 2, name: '项目B' },
        { id: 3, name: '项目C' }
      ]
    }
  },
  methods: {
    handleClick() {
      this.count += 1; // 点击事件：计数 +1
    },
    toggleShow() {
      this.isShow = !this.isShow; // 切换 v-if 状态
      this.isShowVShow = !this.isShowVShow; // 切换 v-show 状态
    }
  }
}
</script>

<style scoped>
.grammar-demo {
  padding: 20rpx;
}
.section {
  margin-bottom: 30rpx;
}
.title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 15rpx;
}
.content {
  margin-top: 10rpx;
  color: #333;
}
.condition-box {
  margin-top: 10rpx;
  padding: 15rpx;
  background-color: #f5f5f5;
}
.list-item {
  margin-top: 10rpx;
  padding: 15rpx;
  border: 1px solid #eee;
  border-radius: 8rpx;
}
</style>